.ui-dialog { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; background-color: rgba(0, 0, 0, .7); }
.ui-dialog.show { display: flex; animation: fadeIn .2s; }
.ui-dialog.show > .ui-dialog-con { animation: dialogShow .3s .3s; animation-fill-mode: both; }
@keyframes dialogShow {
    0% { opacity: 0; transform: translateY(-50px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ui-dialog-con { display: flex; flex-direction: column; max-width: 90vw; max-height: 90vh; margin: auto; border-radius: .1rem; background-color: #fff; }

.ui-dialog-hd { display: flex; justify-content: space-between; align-items: center; height: .8rem; padding-left: .3rem; border-bottom: .04rem solid #dbdbdb; }
.ui-dialog-title { flex: 1; font-size: .26rem; line-height: 1.4; font-weight: 600; user-select: none; }
.ui-dialog-close {
    position: relative;
    display: block;
    width: .8rem;
    height: .8rem;
    margin-left: .2rem;
    border: none;
    background: none;
    text-indent: -999em;
    outline: none;
    color: #333;
    transition: color .2s linear, transform .2s linear;
    }
.ui-dialog-close::before,
.ui-dialog-close::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: .3rem;
    height: 0;
    margin: auto;
    border-top: 3px solid currentColor;
    border-radius: 2px;
    transition: border-color .2s;
    }
.ui-dialog-close::before { transform: rotate(-45deg); }
.ui-dialog-close::after { transform: rotate(-135deg); }

.ui-dialog-close:hover,
.ui-dialog-close:active,
.ui-dialog-close:focus { transform: translateY(2px); color: #000; }

.ui-dialog-bd { flex: 1; overflow: auto; }
